<script setup>
import {onMounted, ref} from 'vue';
import {ElForm, ElMessage} from 'element-plus';
import {Lock, User} from "@element-plus/icons-vue";
import {useRouter} from 'vue-router';
import store from "../../store/index.js";

const $router = useRouter();

onMounted(() => {

});

const login_loading = ref(false);
const formRef = ref(null);
const form = ref({
  username: '',
  password: ''
});
const registerStatus = ref(false);
const rules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
});

const enterLogin = () => {
  if (registerStatus.value) {
    handleRegister();
  } else {
    login();
  }
};
const login = () => {
  login_loading.value = true;
  formRef['value'].validate((valid) => {
    if (valid) {
      // TODO 调用登录接口
      store.dispatch('login/handleLogin', form.value).then((res) => {
        ElMessage.success('登录成功');
        let timer = setTimeout(() => {
          // TODO 登录成功，跳转到首页面
          $router.push('/');
          clearTimeout(timer);
        }, 1000);
      });
    } else {
      login_loading.value = false;
      console.log('表单验证不通过');
    }
  });
};
const register = (value) => {
  registerStatus.value = value;
  form.value = {
    username: '',
    password: ''
  };
};
const handleRegister = () => {
  login_loading.value = true;
  formRef['value'].validate((valid) => {
    if (valid) {
      let timer = setTimeout(() => {
        // TODO 调用后端的注册接口
        clearTimeout(timer);
      }, 1000);
    } else {
      login_loading.value = false;
      console.log('表单验证不通过');
    }
  });
};
</script>
<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-left">
      
      </div>
      <div class="login-right">
        <div class="login-title">
          <span>{{ registerStatus ? '用户注册' : '用户登录' }}</span>
        </div>
        <div class="login-form">
          <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item prop="username">
              <el-input :prefix-icon="User" placeholder="请输入用户名" maxlength="30"
                        v-model="form.username"
                        @keyup.enter="enterLogin"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :prefix-icon="Lock" placeholder="请输入密码" maxlength="30" v-model="form.password"
                        type="password"
                        @keyup.enter="enterLogin"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-if="registerStatus" :loading="login_loading" style="width: 100%;" color="#626aef"
                         @click="handleRegister">立即注册
              </el-button>
              <el-button v-else :loading="login_loading" style="width: 100%;" color="#626aef" @click="login">立即登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-footer">
          <span v-if="registerStatus">已有账号，<span @click="register(false)" style="color: #409EFF;cursor: pointer;">立即登录</span>？</span>
          <span v-else>还没账号，<span @click="register(true)"
                                      style="color: #409EFF;cursor: pointer;">立即注册</span>？</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 28px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: auto;
  border-radius: unset;
  
  .el-input__inner {
    cursor: auto !important;
  }
}

.login-container {
  background-color: lightblue;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  align-content: center;
}

.login-content {
  display: flex;
  width: 50%;
  height: 60%;
  margin: 0 auto;
  background-color: white;
  
  .login-left {
    width: 40%;
    height: 100%;
    background-color: rgba(0, 190, 110, 0.1);
    filter: blur(10px);
  }
  
  .login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 60%;
    height: 100%;
    background-color: rgba(64, 158, 255, .1);
  }
}

.login-title {
  font-size: 18px;
  font-weight: 800;
  padding: 20px;
  color: #41A9F9;
}

.login-form {
  width: 70%;
  margin: 0 auto;
  
  ::v-deep(.el-input__inner) {
    border: none;
    outline: none;
  }
}

.login-footer {
  font-size: 12px;
  color: #8F959E;
}
</style>